<div class="performance">
<div class="performance-container">
<header>
<div class="time-choose">
<div class="time-spans">
<span class="time">
<span (click)=onClickHeader(0) [ngClass]="{on:active==0}">月度发电量</span>
<span (click)=onClickHeader(1) [ngClass]="{on:active==1}">风场发电量</span>
</span>
</div>
</div>
</header>
<div class="main">
<!--月度发电量  -->
<div [ngClass]="{'main-content':true, active: active==0}">
<section class="farm">
<!-- 公司级月度发电量 -->
<div class="title">
            <p>公司月度总发电量</p> 
</div>
<div class="farm-column">
            <app-capacity-chart [sign]="currtM" (onMonthClick)="getCurrentSign($event)" [xAxisData]="xAxisMonth" [capacityData]="compCapacity" ></app-capacity-chart>
</div>
</section>

<section class="turbine">
<!-- 场站级发电量 -->
<div class="title">
<p><span style="color: #fff;background-color: green" >{{ currtM }}</span>各风场发电量</p>
</div>
<div class="turbine-column">
            <app-capacity-chart [sign]="" [xAxisData]="xAxisFarm" [capacityData]="farmCapacity" ></app-capacity-chart>
<!-- 图表 -->
</div>
</section>
</div>

<!--场站发电量  -->
<div class="main-content" [ngClass]="{'main-content':true, active: active==1}">
<section class="farm">
<!-- 场站发电量 -->
<div class="title">
<p>风场发电量</p>
</div>
<div class="farm-column">
<app-capacity-chart [sign]="currtF" (onMonthClick)="getCurrentSign($event)"  [xAxisData]="xAxisFarm" [capacityData]="farmYearCapacity" ></app-capacity-chart>
<!-- 图表 -->
</div>
</section>

<section class="turbine">
<div class="title">
<p><span class="currtF" style="color: #fff;background-color: green;border-radius: 3px;padding-right: 3px;" >{{ currtF }}</span>每月发电量</p>
</div>
<div class="turbine-column">
<!-- 图表 -->
            <app-capacity-chart [sign]="" [xAxisData]="xAxisMonth" [capacityData]="farmMonthCapacity" ></app-capacity-chart>
</div>
</section>
</div>
</div>
</div>
</div>
